div#chat_room-mini-header-test {
    background-image: url(../bilder/wall4.png);
    height:50px;
    width:100%;
    padding: 10px;
    float:left;
    margin-top: 40px;
    position: relative;
}

.chat_room-header-arrow-down {
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #fff;
        margin-top: 10px;
        margin-right: 10px;
        float: right;
}

div#chat_room-large-header-test {
    background-color:rgba(56,56,56,0.5);
    min-height:110px;
    width:100%;
    display: none;
    padding: 10px;
    float:left;
}

#chat_room-mini-header-test:hover + #chat_room-large-header-test, #chat_room-large-header-test:hover  {
    display: block;
}


.chat_room-mini-header-menu-chat {
    float: left;
    text-align: left;
    margin-right: 5px;
}

.chat_room-mini-header-menu-inbox {
    float: left;
}

#chat_room-large-header-your-topics {
    float: left;
    height: 110px;
    width: 800px;
    text-align: left;
}

#chat_room-large-header-in-traffic {
    float: right;
    width: 64px;
    margin-top: 25px;
}



div#chat_room-test {
    background-color: rgba(56,56,56,0.5);
    height:700px;
    width:100%;
    overflow-y:scroll;
    float:left;
    padding: 10px 10px 10px 0px;
}

.topic-box-test {
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
    color:#fff;
    font-family:arial;
    font-size:1em;
    line-height:1.519em;
    word-spacing:-1px;
    margin: 10px;
}

.topic-box-topic-test {
    float: left;
}
.topic-box-cross-test {
    float: right;
    padding-left: 10px;
    margin-top: 3px;
}

#topic-box-blue-test {
    background-color: #008acc;
}

#topic-box-blue-test:hover {
    background-color: #3a3a3a;
}

#topic-box-red-test {
    background-color: #D34836;
}

#topic-box-red-test:hover {
    background-color: #3a3a3a;
}

#topic-box-green-test {
    background-color: #669966;
}

#topic-box-green-test:hover {
    background-color: #3a3a3a;
}

#topic-box-grey-test {
    background-color: #555555;
}

#topic-box-grey-test:hover {
    background-color: #3a3a3a;
}

#topic-box-orange-test {
    background: -webkit-linear-gradient(top, rgba(255,144,40,1) 0%,rgba(227,96,34,1) 81%);
}

#topic-box-orange-test:hover {
    background-color: #3a3a3a;
}

#topic-box-purple-test {
    background-color: #8C489F;
}

#topic-box-purple-test:hover {
    background-color: #3a3a3a;
}

/* Message */

.message-container {
    padding: 20px;
    padding-left: 80px;
    float: left;
    min-width: 310px;
    border-radius: 5px;
    margin: 5px;
    margin-left: 0px;
    color: white;
    font-family:arial;
    font-size:1em;
    line-height:1.519em;
    word-spacing:-1px;
    position: relative;
    text-align: left;
    overflow: hidden;
}


.message-image {
    float: left;
    height: 64px;
    width: 64px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #333;
    cursor: pointer;
    z-index: 80;
}





#message-container-red {
   background: -webkit-linear-gradient(top, rgba(186,50,50,1) 0%,rgba(147,0,0,1) 100%);
}

#message-container-blue {
   background: -webkit-linear-gradient(top, rgba(0,149,224,1) 0%,rgba(0,104,142,1) 100%); 
}

#message-container-green {
    background: -webkit-linear-gradient(top, rgba(41,154,11,1) 0%,rgba(0,114,21,1) 100%);
}

#message-container-orange {
    background: -webkit-linear-gradient(top, rgba(247,150,39,1) 0%,rgba(227,96,34,1) 100%);
}

#message-container-purple {
   background: -webkit-linear-gradient(top, rgba(131,73,153,1) 0%,rgba(108,24,124,1) 100%);
  
}

#message-container-grey {
   background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(56,56,56,1) 100%); 
}

.message-account {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   font-weight:bold;
   font-family:arial;
   font-size:2.8em;
   line-height:1.519em;
   word-spacing:-1px;
}

#message-account-red {
    color: #D34836;
}

#message-account-blue {
    color: #0088cc;
}

#message-account-green {
    color: #669966;
}

#message-account-orange {
    color: #E36022;
}

#message-account-purple {
    color: #8C489F;
}

#message-account-grey {
    color: #555555;
}

.message-overlay {
    background-color: #444;
    position: absolute;
    height: 64px;
    width: 100%;
    display: none;
    top: 0;
    padding: 5px;
    padding-left: 80px;
    left: 0;
    float: left;

}

.message-image:hover + .message-overlay, .message-overlay:hover {
    display:block;
} 

.message-overlay-account-name {
    float: left;
    font-family:arial;
    font-size:1em;
    line-height:1.519em;
    word-spacing:-1px;
    color: #fff;
    width: 90%;
}

.message-overlay-account-name:hover {
    color: #ccc;
    cursor: pointer;
}

.message-overlay-add-to-contacts {
    float: left;
    width:10%;
}

.message-overlay-total-upvotes {
    float: left;
    padding: 0px 10px 0px 10px;
    border-radius: 5px;
    background-color: #222;
    font-family:arial;
    font-size:1em;
    line-height:1.519em;
    word-spacing:-1px;
    color: #fff;
    
}

.message-overlay-vote-up {
    float: left;
    padding: 0px 10px 0px 10px;
    border-radius: 5px;
    background-color: #E64C3C;
    font-family:arial;
    font-size:1em;
    line-height:1.519em;
    word-spacing:-1px;
    color: #fff;
    margin-left: 5px;
    cursor: pointer;
}

.message-overlay-vote-down {
    float: left;
    padding: 0px 10px 0px 10px;
    border-radius: 5px;
    background-color: #0088cc;
    font-family:arial;
    font-size:1em;
    line-height:1.519em;
    word-spacing:-1px;
    color: #fff;
    margin-left: 5px;
    cursor: pointer;
}

/* reply-form */

#reply-form-container {
    width: 100%;
    border-top: 2px solid #ccc;
    padding: 10px;
    height: 200px;
    background-color:rgba(56,56,56,0.5);
    float: left;
}

#reply-form {
  width: 100%;
  margin: 0px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
}

#reply-form-button {
    padding: 10px;
    margin-top: 10px;
    margin-left: 0px;
    outline: none;
    text-align: center;
    width: 100px;
    background-color: #333;
    float: right;
    font-size: 20px;
    font-family:LatoRegular, Verdana, sans-serif;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

#reply-form-button:hover {
   background-color: #555;
}

.reply-form-choose-color {
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    height: 47px;
    width: 47px;
    border-radius: 5px;
    cursor: pointer;
}

#reply-form-choose-color-red {
    background-color: #D34836;
}

#reply-form-choose-color-red:hover {
    border: 4px solid #333;
    background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-32.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-choose-color-blue {
    background-color: #0088cc;
}

#reply-form-choose-color-blue:hover {
    border: 4px solid #333;
    background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-32.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-choose-color-green {
    background-color: #669966;
}

#reply-form-choose-color-green:hover {
    border: 4px solid #333;
    background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-32.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-choose-color-orange {
    background-color: #E36022;
}

#reply-form-choose-color-orange:hover {
    border: 4px solid #333;
    background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-32.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-choose-color-purple {
    background-color: #8C489F;
}

#reply-form-choose-color-purple:hover {
    border: 4px solid #333;
    background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-32.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-choose-color-grey {
    background-color: #555555;
}

#reply-form-choose-color-grey:hover {
    border: 4px solid #333;
    background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-32.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-image-upload {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    height: 47px;
    width: 47px;
    cursor: pointer;
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-camera-48.png);
    background-repeat:no-repeat;
    background-position:center;
}

#reply-form-smiley {
    float: right;
    margin-top: 10px;
    height: 47px;
    width: 47px;
    cursor: pointer;
    background-image: url(https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_2-32.png);
    background-repeat:no-repeat;
    background-position:center;
}